<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-touch-fullscreen" content="yes" />
		<meta name="format-detection" content="telephone=no"/>
		<meta name="apple-mobile-web-app-status-bar-style" content="black" /> 
		<meta name="msapplication-tap-highlight" content="no" />
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width, viewport-fit=cover" />
		<title>启蒙优选-选课</title>
		<link rel="stylesheet" href="__TMPL__/home/public/assets/css/style.css?v=072208" />
		<link rel="stylesheet" href="__TMPL__/home/public/assets/css/swiper.min.css">
	</head>
	<style>
		.swiper-container .swiper-pagination-bullet-active{background: #fff;/* 两种都可以 */}
		.swiper-pagination-bullet{background: #ebebeb!important;}
		.moreList{text-align: center;font-size:.72rem;color:#666;line-height:2.5rem;display: none;}
		.paddingTop50{padding-top:4rem!important;}
		.indexIndex .content .index_top .curriculum_tab{padding:.4rem .5rem;font-size:.63rem;color:#333;font-weight: 300;overflow: hidden;}
		.indexIndex .content .index_top .curriculum_tab .curriculumBox{padding-bottom: .8rem;margin-bottom: -.8rem;overflow-x:auto;white-space:nowrap;}
		.indexIndex .content .selected .select_tab{padding-top:.6rem;}

		.loginMask .loginBox img.close{width:1rem;height:1rem;position:absolute;bottom:-1.4rem;left:50%;margin-left:-.5rem;}
	</style>
	<body>
		<!-- 个人中心 --> 
		<div class="indexIndex">
			<div class="content">
				<!-- 顶部选择年龄、搜索、科目切换 -->
				<div class="index_top">
					<div class="search flex juscbtween">
						<div class="left flex alitemCenter checkAge">
								<foreach name="age_list" item="vo" key="k">
                        				<if condition="$age_id gt 0">
                        					<if condition="$age_id eq $vo.id"><span class="sousuo" value="{$vo.id}">{$vo.name}</span></if>
                        				<else/>
                        					<if condition="$k eq 0"><span class="sousuo" value="">全部年龄</span></if>
                        				</if>
                    			</foreach>
							
						<img src="__TMPL__/home/public/assets/img/bottom.png" alt=""></div>
						<div class="right"><a href="./seek_index" class=" flex juscbtween" style="height:100%">
							<input type="text" readonly="readonly">
							<img src="__TMPL__/home/public/assets/img/search.png" alt=""></a>
						</div>
					</div>
					<div class="curriculum_tab">
						<div class="curriculumBox">
							<span <empty name="subject_id">class="on"</empty>>精选</span>
							<foreach name="subject_list" item="vo">
								<notempty name="subject_id">
									<span value="{$vo.id}" <if condition="$subject_id eq $vo.id"> class="on"</if>>{$vo.name}</span>
								<else />
									<span value="{$vo.id}">{$vo.name}</span>
								</notempty>
	                           
	                        </foreach>
                        </div>
					</div>
				</div>
				<!-- 精选课程 -->
				<div class="selected <notempty name="subject_id">hide</notempty>">
					<div class="banner">
						<div class="swiper-container">
						    <div class="swiper-wrapper">
                                <foreach name="banner_list" item="vo">
                                   <a href="{$vo.url}" class="swiper-slide"><img src="{$vo.logo}" alt=""></a>
                                </foreach>
						    </div>
						    <!-- Add Pagination -->
						    <div class="swiper-pagination"></div>
						</div>
					</div>
					<div class="select_tab flex juscenter">

						<foreach name="rukou_list" item="vo">
                            <a href="{$vo.url}" class="_item">
								<img src="{$vo.logo}" alt="">
								<p>{$vo.name}</p>
							</a>
                        </foreach>
					</div>
					<div class="adv flex juscbtween hide">
						<a href=""><img src="__TMPL__/home/public/assets/img/index/1.png" alt=""><span>如何上课</span></a>
						<a href=""><img src="__TMPL__/home/public/assets/img/index/2.png" alt=""><span>课程顾问</span></a>
					</div>
					<a href="" class="advTwo hide"><img src="__TMPL__/home/public/assets/img/index/3.png" alt=""></a>
				</div>
				<!-- 课程列表 -->
				<div class="curriculum_list <notempty name="subject_id">paddingTop50</notempty>">
					<div class="thisList">
						<div class="select_title <notempty name="subject_id">hide</notempty>">爆款课程</div>
						<foreach name="course_list" item="vo">
							<a href="./course_details?course_id={$vo.id}&invite_code={$invite}" class="curriculum_item">
								<div class="curriculum_img">
									<img src="{$vo.tj_logo}" alt="">
									<if condition="$vo.inventory_number eq 0">
										<div class="sell_out">
											<div class="sell_out_text">已售罄</div>
										</div>
									</if>
								</div>
								<div class="info">
									<h3>{$vo.title}</h3>
									<div class="type flex alitemCenter">
										<foreach name="vo.label" item="lo">
											<span>{$lo.label}</span>
										</foreach>
									</div>
									<div class="money flex juscbtween">
										<div class="left">
											<i>￥</i><b>{$vo.sell_money}</b><span>￥{$vo.original_money}</span>
										</div>
										<div class="right">
											<i><?php if(($vo['basic_number'] + $vo['sales_number']) < 10000){
												echo ($vo['basic_number'] + $vo['sales_number']);
											}else{
												echo round(($vo['basic_number'] + $vo['sales_number'])/10000, 1).'万';
											} ?></i>人正在学习
										</div>
									</div>
								</div>
							</a>
						</foreach>
					</div>
					<php>
					  $invite_code = count($course_list);
					  if($invite_code <= 0){
					</php>
						<div class="noHaveData">
							<img src="__TMPL__/home/public/assets/img/noHaveOrder.png" alt="">
							<p>暂无数据</p>
						</div>
					<php>}</php>
					<div class="moreList">正在加载</div>
				</div>
			</div>
			<!-- 年龄选择弹框 -->
			<div class="ageMask hideThis">
				<div class="ageBox bubbling">
					<h3>您的孩子处于</h3>
					<p>请放心选择，随时可更改</p>
                    <foreach name="age_list" item="vo">
                        <div class="age_item <if condition="$age_id eq $vo.id">on</if>"  value="{$vo.id}">{$vo.name}</div>
                    </foreach>
					<div class="age_item <if condition="$age_id eq ''">on</if>" >全部年龄</div>
				</div>
			</div>

			<!-- 首次登录弹框 -->
			<div class="loginMask hideThis">
				<div class="loginBox bubbling">
					<h3>完善信息，可以获得更精准的推荐</h3>
					<div class="sexBox flex juscenter">
						<div class="sexItem" data-sex="女"><img src="__TMPL__/home/public/assets/img/index/girl.png" alt=""><p>小公主</p></div>
						<div class="sexItem" data-sex="男"><img src="__TMPL__/home/public/assets/img/index/boy.png" alt=""><p>小王子</p></div>
					</div>
					<div class="baby_info flex juscbtween">
						<b>宝宝昵称</b>
						<input type="text" placeholder="请输入宝宝名" class="babyName">
					</div>
					<div class="baby_info flex juscbtween">
						<b>宝宝生日</b>
						<input type="text" id="dateSelectorOne" placeholder="请选择宝宝生日">
					</div>
					<button id="submitBabySex">确定</button>
					<img src="__TMPL__/home/public/assets/img/close.png" class="close" alt="">
				</div>
			</div>
			<!-- 底部tab -->
			<div id="bottmm" class="flex juscbtween">
				<a href="{:url('Index/index')}" class="foot_item on">
					<img src="__TMPL__/home/public/assets/img/foot/oneSelect.png" alt="">
					<p>选课</p>
				</a>
				<!-- <a class="foot_item">
					<img src="./img/foot/two.png" alt="">
					<p>学习</p>
				</a> -->
				<a href="{:url('member/index')}" class="foot_item">
					<img src="__TMPL__/home/public/assets/img/foot/three.png" alt="">
					<p>我的</p>
				</a>
			</div>
		</div>
	</body>
	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/jquery-2.0.3.min.js"></script>
	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/swiper.min.js"></script>
	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/iScroll.js"></script>
	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/Mdate.js"></script>
  	<script rel="stylesheet" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
  	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/base.js"></script>
  	<script rel="stylesheet" src="__TMPL__/home/public/assets/js/layer/layer.js"></script>
	<script>
		$(function(){

			var one_login = '{$one_login}';
			if(one_login){
				$('.loginMask').show();
			}


			//点击课程科目切换
			$('.curriculum_tab span').click(function(){
				$(this).addClass('on').siblings('span').removeClass('on');

				var id = $(this).attr('value');
				var age = $('.sousuo').attr('value');
		    
		        var formHtml = "<form action='/' method='get'>";
                formHtml += "<input type='hidden' name='subject_id' value="+id+"' />";
                formHtml += "<input type='hidden' name='age_id' value="+age+"' />";
                formHtml += "</form>";

	            var form = $(formHtml);
                $(document.body).append(form);
                form.submit();

                //location.href="./?subject_id="+id+'&age_id='+age;
			})

	        var position = $('.curriculum_tab .on').offset();
	        position.left = position.left-90;
      		$(".curriculumBox").animate({scrollLeft:position.left}, 100);

			//精选轮播图
		    var swiper = new Swiper('.swiper-container', {
		       	loop:true,
		      	pagination: {
		        	el: '.swiper-pagination'
		      	},
		    });

		    //选择年龄弹框显隐
		    $('.checkAge').click(function(){
		    	//点击选择显示
		    	$('.ageMask').show();
		    })
		    $('.hideThis').click(function(){
		    	//点击幕布区隐藏
		    	$(this).hide();
		    })
		    $('.close').click(function(){
		    	//点击幕布区隐藏
		    	$('.loginMask').hide();
		    })
		    $('.bubbling').click(function(){
		    	return false;
		    })

		    var len = $('.select_tab').children('a').length;
		    console.log(len)
		    if(len == 2){
		    	$('.select_tab a').css('width','50%');
		    }else if(len == 3){
		    	$('.select_tab a').css('width','33%');
		    }else if(len == 4){
		    	$('.select_tab a').css('width','25%');
		    }else if(len == 5){
		    	$('.select_tab a').css('width','20%');
		    }

		    //选择年龄段
		    $('.age_item').click(function(){

		    	var id = $(this).attr('value');
		    	var subject = $('.on').attr('value');
		    
		        var formHtml = "<form action='/' method='get'>";
                formHtml += "<input type='hidden' name='age_id' value="+id+"' />";
                formHtml += "<input type='hidden' name='subject_id' value="+subject+"' />";
                formHtml += "</form>";

	            var form = $(formHtml);
                $(document.body).append(form);
                form.submit();
                
		    })

		    var baby_sex;
		    //选择性别选中状态
		    $('.sexItem').click(function(){
		    	$(this).siblings().find('p').removeClass('on');
		    	baby_sex = $(this).attr('data-sex');
		    	$(this).find('p').addClass('on');
		    })
		    $('#submitBabySex').click(function(){
		    	var baby_name = $('.babyName').val();
		    	var baby_birthday = $('#dateSelectorOne').val();
		    	if(!baby_name){
		    		return layer.msg('请输入宝宝名');
		    	}else if(!baby_birthday){
		    		return layer.msg('请选择宝宝生日');
		    	}else if(!baby_sex){
		    		return layer.msg('请选择宝宝性别');
		    	}
		        $.ajax({
		          	url: '/one_setuser',
		          	type: 'POST',
		          	data: {baby_name:baby_name,baby_birthday:baby_birthday,baby_sex:baby_sex},
		        }).done(function(res) {
		          	if(res.code == 200){
		           		var data = res.data;
		           		layer.msg('设置成功！');
		           		$('.loginMask').hide();
		          	}else{
		                layer.msg(res.msg);
		          	}
		        }).fail(function(err) {
		            layer.msg(err.msg);
		        })
		    })

		    //时间选择
		    new Mdate("dateSelectorOne");

		    //上拉加载
		    var pageNum = 1;
			$(window).scroll(function () {
			    //滚动条滚动时调用
			    var scrollTop = $(this).scrollTop(); //计算已经卷进去滚动条的的高度
			    var scrollHeight = $(document).height(); //当前页面的总高度
			    var windowHeight = $(this).height(); //当前window的高度
				var id = $('.curriculum_tab .on').attr('value') || '';
				var age = $('.sousuo').attr('value') || '';
				console.log(id)
			    if (scrollTop+3 + windowHeight >= scrollHeight) {
			    	$('.moreList').show();
			    	pageNum += 1;
				    $.ajax({
				      	url: '/get_course',
				      	type: 'post',
				      	data: {
				      		'page':pageNum,
				        	"age_id": age,
				        	'subject_id': id
				      	},
				      	success: function success(d) {
				      		if(d.code == 0){
					      		if(d.data){
					      			var htm = '';
					      			for(let i=0;i<d.data.course_list.length;i++){
					      				const item = d.data.course_list[i];
					      				htm += `
											<a href="./course_details?course_id=`+item.id+`&invite_code=`+d.data.invite+`" class="curriculum_item">
												<div class="curriculum_img">
													<img src="`+item.tj_logo+`" alt="">`;
													if(item.inventory_number <= 0){
														htm += `<div class="sell_out">
															<div class="sell_out_text">已售罄</div>
														</div>`;
													}
										htm += `</div>
												<div class="info">
													<h3>`+item.title+`</h3>
													<div class="type flex alitemCenter">`;
													for(let o=0;o<item.label.length;o++){
														htm += `<span>`+item.label[o].label+`</span>`;
													}
										htm += `</div>
													<div class="money flex juscbtween">
														<div class="left">
															<i>￥</i><b>`+item.sell_money+`</b><span>￥`+item.original_money+`</span>
														</div>
														<div class="right">
															<i>`+Number(item.basic_number+item.sales_number)+`</i>人正在学习
														</div>
													</div>
												</div>
											</a>`;
					      			}
					      			$('.thisList').append(htm);
					      		}
				      		}
				      		$('.moreList').html('没有更多了')
				      	},
				      	error: function error(e) {
				        	console.log(e);
				      	}
				    })
			    }
			});
		})
	</script>
</html>
